<template>
  <div>
    <!-- 搜索 -->
    <div class="search" v-show="isShow">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="">
          <el-input v-model="formInline.user" placeholder="请输入分类名称搜索" />
        </el-form-item>
        <el-form-item>
          <el-button type="success" @click="onSearch">
          搜索
          <el-icon><Search /></el-icon>
          </el-button>
          <el-button type="warning" @click="onReset">
          重置
          <el-icon><Refresh /></el-icon>
          </el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 搜索 -->

    <div class="flex">
      <div class="flex-left">
        <el-button type="primary" color="#1890FF"
        @click="isaddClassify">
          <el-icon class="el-icon--left">
            <Plus />
          </el-icon>
          新增
        </el-button>
        <el-button type="primary" color="#89E7B3" disabled>
          <el-icon class="el-icon--left">
            <EditPen />
          </el-icon>
          修改
        </el-button>

        <el-upload
          action="#"
          accept=".xlsx, .xls"
          :before-upload="toLead"
        >
          <el-button type="primary" color="#FFA4A4">
            <el-icon class="el-icon--left">
              <Top />
            </el-icon>
            导入
          </el-button>
        </el-upload>

        <el-button type="primary" color="#FFBA00"
        @click="derive">
          <el-icon class="el-icon--left">
            <Download />
          </el-icon>
          导出
        </el-button>
      </div>

      <div class="flex-rigth">
        <el-button-group class="ml-4">
          <el-button @click="isShow = !isShow">
            <el-icon>
              <Search />
            </el-icon>
          </el-button>
          <el-button @click="onReset">
            <el-icon>
              <Refresh />
            </el-icon>
          </el-button>
          <el-button>
            <el-icon>
              <Grid />
            </el-icon>
          </el-button>
        </el-button-group>
      </div>
    </div>
  </div>
</template>

<script>
import { read, utils, writeFileXLSX } from 'xlsx'
import { addItems } from '@a/itemLists'
export default {
  name: 'IconPage',
  props: ['isaddClassify'],
  data () {
    return {
      isShow: true,
      formInline: {
        user: ''
      }
    }
  },
  methods: {
    toLead (file) {
      console.log(file)
      // 导入
      const fr = new FileReader()
      fr.readAsArrayBuffer(file)
      // console.log(fr)
      fr.onload = () => {
        const wb = read(fr.result)
        const data = utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]])
        // console.log(data)
        const _data = data.map((item) => {
          return {
            itemName: item.商品名,
            price: item.商品价格,
            desc: item.商品描述
          }
        })
        addItems({
          _data
        }).then(res => {
          if (res.data.code === 200) {
            this.$message({
              type: 'success',
              message: res.data.msg,
              deration: 1500
            })
          }
          //
          this.onReset()
        })
      }
      return false
    },
    derive () {
      // 点击导出excel
      // 导出数据
      const data = [
        {
          itemName: '商品1',
          price: 100,
          desc: '商品描述'
        }
      ]
      const ws = utils.json_to_sheet(data)
      const wb = utils.book_new()
      utils.book_append_sheet(wb, ws, 'Data')
      writeFileXLSX(wb, '商品excel模板.xlsx')
    },
    onSearch () {
      this.$emit('onSearch', this.formInline)
    },
    onReset () {
      this.formInline.user = ''
      this.$emit('onReset', this.formInline)
    }
  }
}
</script>

<style lang="scss" scoped>
.flex {
  display: flex;
  justify-content: space-between;
  &-rigth {
    .el-icon {
      color: #606266;
    }
  }
  .flex-left{
    display: flex;
  }
}
.el-button--primary{
  margin-right: 10px;
}
.el-button {
  color: #fff;
}
.search{
  .el-icon{
    margin-left: 6px;
  }
}
</style>
